<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #price-min,
        #price-max {
            width: 50px;
        }
        table {
            border-collapse: collapse;
        }
        td {
            padding: 4px 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form">
            价格区间
            <input id="price-min" type="text"> -
            <input id="price-max" type="text">
            <button id="price-search">按价格搜索</button>
            名称
            <input id="goods-name" type="text">
            <button id="search">搜索</button>
        </div>
        <table border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>名称</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="./jq/jq.js"></script>
    <script>

        const data = [
            {
                id: 1,
                name: '小米',
                price: 3999,
            },
            {
                id: 2,
                name: '华为',
                price: 5999,
            },
            {
                id: 3,
                name: '苹果',
                price: 9999,
            },
            {
                id: 4,
                name: 'vivo',
                price: 998,
            },
            {
                id: 5,
                name: 'oppo',
                price: 999,
            },
        ];

        const state = {
            // data: data, // 普通写法
            data: [],
        };

        // vue2.x 原理
        Object.defineProperty(state, 'data', {
            set (newData) {
                render(newData);
            },
        });

        function render (data) {
            const tbody = $('tbody').empty();
            for (const item of data) {
                const tr = $(`
                    <tr>
                        <td>${ item.id }</td>
                        <td>${ item.name }</td>
                        <td>${ item.price }</td>
                    </tr>
                `);
                tbody.append(tr);
            }
        }

        state.data = data;

        // 按名称搜索
        $('#search').on('click', function () {
            const val = $('#goods-name').val();
            state.data = data.filter(function (item) {
                return item.name.includes(val);
            });
        });

        // 按价格搜索
        $('#price-search').on('click', function () {
            const min = $('#price-min').val() || 0;
            const max = $('#price-max').val() || Infinity;
            state.data = data.filter(function (item) {
                return item.price >= min && item.price <= max;
            });
        });


        // 定义属性
        // Object.keys  .values   .assign
        // Object.defineProperty

        // const data = {
        //     a: 1,
        // };

        // // data.a = 2;

        // Object.defineProperty(data, 'a', {
        //     set (newValue) {
        //         console.log('updated');
        //     },
        //     get () {
        //         console.log('readed');
        //     },
        // });

        // // function setData (key, value) {
        // //     data[key] = value;
        // //     console.log('hello');
        // // }

        // // 在data.a发生改动时 执行任务 
        // setInterval(() => {
        //     data.a
        // }, Math.random() * 1000);

    </script>
</body>
</html>